<template>
  <div class="dashboard-editor-container">
    <el-card class="cardbox1" :style="{ background: $store.state.settings.theme }">
      <div class="cbox1">
        <p class="p1" style="font-size:20px;line-height:30px">系统监控简介</p>
        <p class="p2">
          系统监控是对计算机系统的各种资源和运行状况进行实时跟踪和监控的过程。它的主要目的是确保系统的稳定运行，及时发现并解决潜在的问题，以提高系统的可靠性和性能。
        </p>
      </div>
      <div class="cbox2">
        <el-image :src="require('@/assets/images/welcomePicture.png')" fit="fill" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {

    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  flex: 1;
  padding: 0 16px;
  background-color: rgb(255, 255, 255);
  position: relative;
  .cardbox1 {
    margin-top: 16px;
    height: 200px;
    position: relative;
    .el-card__body {
      display: flex;
      .cbox1 {
        width: 70%;
        margin-left: 12px;
        margin-top: 4px;
        z-index: 2;
      }
      .cbox2 {
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 1;
        margin-left: 20px;
      }
      p {
        font-size: 16px;
        font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        margin: 0;
      }
      .p2 {
        font-size: 16px;
        line-height: 32px;
        font-weight: 300;
        margin-top:16px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .cardcss {
    padding: 0 !important;
  }
}
@media (max-width: 550px) {
  .cbox2 {
    display: none;
  }
}
</style>
<style >
.cardbox1 .el-card__body {
  display: flex;
  align-items: flex-start;
}
</style>
